<template> 
	<view class="root flex text-center"> 
		<view hover-stay-time="50" hover-class="hover" class="slide" :style="{width:`${100/this.list.length}%`,left: `${current*100/list.length}%`,backgroundColor:bgc }"></view>
		<view style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex;">
			<view hover-stay-time="50" hover-class="hover" @tap="change(index,item)" :class="current == index ? 'checked':''" class="flex1 choice text-center" style="" v-for="(item,index) in this.list" :key="index">{{item.content}}</view>
		</view>
	</view>

</template>  
<script>
	export default {
		data() {
			return { 
				nowPage:null,
				translateX: 0,
				bgc: '#33B0FF',
				tl: [],
			}
		},
		onShow() {
			
		},
		props: {
			present:{
				default:0
			}, 
			tipList: {
				default: () => {
					return [{
						content: '选项一',
					}, {
						content: '选项二',
					}, {
						content: '选项三',
					}]
				}
			}
		},
		computed: {
			current:{
				get(){
					if(this.nowPage == null){
						this.nowPage = this.present
					}
					return this.nowPage
				},
				set(newValue){
					console.log("按时"+newValue)
					this.nowPage = newValue
				}
			},
			list: {
				get() {
					this.tl = [];
					this.tipList.forEach((e,i) => {
						if (e.color != null) {
							if(i == 0){
								this.bgc = e.color
							}
							this.tl.push(e)
						} else {
							this.tl.push({
								...e,
								color: '#33B0FF'
							})
						}
					})
					return this.tl
				}
			}
		},
		methods: {
			change(current,item) {
				this.current = current
				console.log(item)
				this.bgc = item.color
				console.log(this.current)
				this.$emit('changeChoice', {
					current
				})
			}
		}
	}
</script>
<style scoped>
	.hover{
		transform: scale(0.95);
		filter: grayscale(18%)
	}
	.checked{
		color: #FFFFFF !important;
		font-size: 40rpx !important;
	}
	.choice{
		line-height: 100rpx;
		font-size: 35rpx;
		font-weight: 800;
		transition: color 0.2s,font-size 0.2s;
	}
	.slide {
		transition: left 0.2s, background-color 0.2s;
		position: absolute;
		border-radius: 100rpx;
		height: 100rpx;
	}

	.root {
		position: relative;
		font-size: 26rpx;
		border-radius: 100rpx; 
		line-height: 70rpx;
		box-shadow: 0 0 10px #808080;
		height: 100rpx;
		width: 100%;
		display: flex;
	}
</style>
